<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>宝贝盒子 - 创意Logo设计</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
  <style>
    :root {
      --primary: #4f46e5;
      --secondary: #8b5cf6;
      --accent: #ec4899;
      --success: #10b981;
      --warning: #f59e0b;
      --info: #06b6d4;
      --text: #1e293b;
      --light: #f8fafc;
      --dark: #0f172a;
      --card-bg: rgba(255, 255, 255, 0.95);
      --shadow: 0 8px 32px rgba(60, 60, 120, 0.15);
    }
    
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: 'HarmonyOS Sans', '微软雅黑', Arial, sans-serif;
      background: linear-gradient(135deg, #e0e7ff 0%, #d1d5ff 100%);
      background-attachment: fixed;
      color: var(--text);
      min-height: 100vh;
      padding: 20px;
      position: relative;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      background: var(--card-bg);
      border-radius: 24px;
      box-shadow: var(--shadow);
      padding: 40px;
      position: relative;
      overflow: hidden;
    }
    
    .container::before {
      content: '';
      position: absolute;
      top: -50px;
      right: -50px;
      width: 200px;
      height: 200px;
      background: linear-gradient(135deg, #a5b4fc 0%, #c4b5fd 100%);
      border-radius: 50%;
      opacity: 0.1;
      z-index: 0;
    }
    
    .header {
      text-align: center;
      margin-bottom: 40px;
      position: relative;
      z-index: 2;
    }
    
    .header h1 {
      font-size: 2.5rem;
      color: var(--primary);
      margin-bottom: 10px;
      font-weight: bold;
      text-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    .header p {
      font-size: 1.2rem;
      color: #64748b;
      max-width: 700px;
      margin: 0 auto;
      line-height: 1.6;
    }
    
    .logo-design-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 40px 0;
      position: relative;
      z-index: 2;
    }
    
    .logo-container {
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 30px;
      box-shadow: 0 8px 24px rgba(79, 70, 229, 0.15);
      position: relative;
      overflow: hidden;
    }
    
    .logo-core {
      position: relative;
      width: 200px;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    /* 核心盒子设计 */
    .box-base {
      width: 120px;
      height: 120px;
      background: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 100%);
      border-radius: 20px;
      position: relative;
      transform: rotate(15deg);
      box-shadow: 0 10px 20px rgba(79, 70, 229, 0.3);
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }
    
    .box-lid {
      position: absolute;
      width: 140px;
      height: 30px;
      background: linear-gradient(135deg, #8b5cf6 0%, #c4b5fd 100%);
      border-radius: 8px;
      top: -25px;
      left: -10px;
      transform: rotate(-5deg);
      box-shadow: 0 5px 15px rgba(139, 92, 246, 0.3);
    }
    
    /* 盒子中的创意元素 */
    .creative-element {
      position: absolute;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      animation: float 5s infinite ease-in-out;
    }
    
    .element-1 {
      background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);
      top: -50px;
      left: 60px;
      animation-delay: 0s;
      box-shadow: 0 5px 15px rgba(236, 72, 153, 0.3);
    }
    
    .element-2 {
      background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
      top: 20px;
      right: -60px;
      animation-delay: 0.5s;
      box-shadow: 0 5px 15px rgba(245, 158, 11, 0.3);
    }
    
    .element-3 {
      background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
      bottom: -50px;
      left: 40px;
      animation-delay: 1s;
      box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3);
    }
    
    .element-4 {
      background: linear-gradient(135deg, #06b6d4 0%, #67e8f9 100%);
      top: 70px;
      left: -60px;
      animation-delay: 1.5s;
      box-shadow: 0 5px 15px rgba(6, 182, 212, 0.3);
    }
    
    .element-5 {
      background: linear-gradient(135deg, #8b5cf6 0%, #c4b5fd 100%);
      bottom: 30px;
      right: -40px;
      animation-delay: 2s;
      box-shadow: 0 5px 15px rgba(139, 92, 246, 0.3);
    }
    
    /* 元素内部的细节 */
    .element-detail {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: white;
      opacity: 0.8;
    }
    
    .element-detail::before,
    .element-detail::after {
      content: '';
      position: absolute;
      background: white;
      border-radius: 2px;
    }
    
    /* 不同元素的独特细节 */
    .element-1 .element-detail::before {
      width: 8px;
      height: 2px;
      top: 6px;
      left: -10px;
    }
    
    .element-1 .element-detail::after {
      width: 2px;
      height: 8px;
      top: -10px;
      left: 6px;
    }
    
    .element-2 .element-detail::before {
      width: 12px;
      height: 2px;
      top: 6px;
      left: -15px;
      transform: rotate(45deg);
    }
    
    .element-2 .element-detail::after {
      width: 12px;
      height: 2px;
      top: 6px;
      left: 13px;
      transform: rotate(-45deg);
    }
    
    .element-3 .element-detail {
      border-radius: 0;
      transform: translate(-50%, -50%) rotate(45deg);
      width: 10px;
      height: 10px;
    }
    
    .element-4 .element-detail {
      width: 0;
      height: 0;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-bottom: 12px solid white;
      border-radius: 0;
      transform: translate(-50%, -50%);
    }
    
    .element-5 .element-detail {
      width: 18px;
      height: 2px;
      border-radius: 2px;
    }
    
    /* 核心盒子内部图案 */
    .box-pattern {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    
    .pattern-line {
      position: absolute;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 2px;
    }
    
    .line-1 {
      width: 80px;
      height: 3px;
      top: 30px;
      left: 20px;
      transform: rotate(45deg);
    }
    
    .line-2 {
      width: 60px;
      height: 3px;
      bottom: 40px;
      right: 20px;
      transform: rotate(-45deg);
    }
    
    .pattern-dot {
      position: absolute;
      width: 8px;
      height: 8px;
      background: white;
      border-radius: 50%;
    }
    
    .dot-1 {
      top: 25px;
      left: 25px;
    }
    
    .dot-2 {
      bottom: 30px;
      right: 30px;
    }
    
    .dot-3 {
      top: 50px;
      right: 25px;
    }
    
    .dot-4 {
      bottom: 25px;
      left: 40px;
    }
    
    /* 动画效果 */
    @keyframes float {
      0%, 100% {
        transform: translateY(0) rotate(0deg);
      }
      50% {
        transform: translateY(-20px) rotate(10deg);
      }
    }
    
    .logo-description {
      text-align: center;
      max-width: 700px;
      margin: 0 auto;
    }
    
    .logo-description h2 {
      font-size: 1.8rem;
      color: var(--primary);
      margin-bottom: 20px;
    }
    
    .logo-description p {
      font-size: 1.1rem;
      color: #64748b;
      line-height: 1.8;
      margin-bottom: 15px;
    }
    
    .symbols-container {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 20px;
      margin: 30px 0;
    }
    
    .symbol {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 120px;
    }
    
    .symbol-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
      font-size: 1.5rem;
    }
    
    .symbol-1 .symbol-icon { background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%); color: white; }
    .symbol-2 .symbol-icon { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); color: white; }
    .symbol-3 .symbol-icon { background: linear-gradient(135deg, #10b981 0%, #34d399 100%); color: white; }
    .symbol-4 .symbol-icon { background: linear-gradient(135deg, #06b6d4 0%, #67e8f9 100%); color: white; }
    .symbol-5 .symbol-icon { background: linear-gradient(135deg, #8b5cf6 0%, #c4b5fd 100%); color: white; }
    
    .symbol-text {
      font-size: 0.9rem;
      color: var(--text);
      text-align: center;
      font-weight: 500;
    }
    
    .footer {
      text-align: center;
      margin-top: 40px;
      padding-top: 30px;
      border-top: 2px solid #e2e8f0;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .btn-generate {
      background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
      color: white;
      font-size: 1.1rem;
      font-weight: bold;
      border: none;
      border-radius: 28px;
      padding: 14px 40px;
      cursor: pointer;
      box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
      transition: all 0.3s ease;
      margin-bottom: 20px;
      position: relative;
      overflow: hidden;
      z-index: 2;
    }
    
    .btn-generate:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
    }
    
    .btn-generate::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.2) 50%, 
        rgba(255, 255, 255, 0) 100%
      );
      transform: rotate(30deg);
      transition: all 0.6s;
    }
    
    .btn-generate:hover::after {
      left: 100%;
    }
    
    .download-options {
      display: flex;
      gap: 15px;
      margin-top: 20px;
      flex-wrap: wrap;
      justify-content: center;
    }
    
    .btn-download {
      background: white;
      color: var(--primary);
      font-size: 1rem;
      font-weight: 600;
      border: 2px solid var(--primary);
      border-radius: 24px;
      padding: 10px 25px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.3s ease;
    }
    
    .btn-download:hover {
      background: var(--primary);
      color: white;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
    }
    
    .btn-download i {
      font-size: 1.1rem;
    }
    
    .download-info {
      margin-top: 15px;
      font-size: 0.9rem;
      color: #64748b;
      padding: 10px;
      background: #f1f5f9;
      border-radius: 12px;
      max-width: 500px;
    }
    
    /* 下载状态提示 */
    .status-message {
      margin-top: 15px;
      padding: 12px;
      border-radius: 12px;
      font-weight: 500;
      display: none;
    }
    
    .status-success {
      background: #ecfdf5;
      color: #10b981;
      border: 1px solid #10b981;
    }
    
    .status-error {
      background: #fef2f2;
      color: #ef4444;
      border: 1px solid #ef4444;
    }
    
    @media (max-width: 768px) {
      .container {
        padding: 20px;
      }
      
      .header h1 {
        font-size: 2rem;
      }
      
      .logo-container {
        width: 250px;
        height: 250px;
      }
      
      .symbols-container {
        gap: 15px;
      }
      
      .symbol {
        width: 100px;
      }
      
      .btn-download {
        padding: 8px 20px;
        font-size: 0.9rem;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>✨ 宝贝盒子 - 创意Logo设计 ✨</h1>
      <p>专为宝贝盒子APP设计的全新Logo，融合六大核心功能与创意玩法</p>
    </div>
    
    <div class="logo-design-area">
      <div class="logo-container" id="logoContainer">
        <div class="logo-core">
          <!-- 核心盒子 -->
          <div class="box-base">
            <div class="box-pattern">
              <div class="pattern-line line-1"></div>
              <div class="pattern-line line-2"></div>
              <div class="pattern-dot dot-1"></div>
              <div class="pattern-dot dot-2"></div>
              <div class="pattern-dot dot-3"></div>
              <div class="pattern-dot dot-4"></div>
            </div>
          </div>
          
          <!-- 盒盖 -->
          <div class="box-lid"></div>
          
          <!-- 创意元素（代表不同功能模块） -->
          <div class="creative-element element-1">
            <div class="element-detail"></div>
          </div>
          
          <div class="creative-element element-2">
            <div class="element-detail"></div>
          </div>
          
          <div class="creative-element element-3">
            <div class="element-detail"></div>
          </div>
          
          <div class="creative-element element-4">
            <div class="element-detail"></div>
          </div>
          
          <div class="creative-element element-5">
            <div class="element-detail"></div>
          </div>
        </div>
      </div>
      
      <div class="logo-description">
        <h2>"创意融合" Logo设计理念</h2>
        <p>此Logo设计完美融合了宝贝盒子的核心功能和创意玩法：</p>
        
        <div class="symbols-container">
          <div class="symbol symbol-1">
            <div class="symbol-icon">🧩</div>
            <div class="symbol-text">原子魔方</div>
          </div>
          
          <div class="symbol symbol-2">
            <div class="symbol-icon">🔥</div>
            <div class="symbol-text">创世熔炉</div>
          </div>
          
          <div class="symbol symbol-3">
            <div class="symbol-icon">🌱</div>
            <div class="symbol-text">奇物收藏</div>
          </div>
          
          <div class="symbol symbol-4">
            <div class="symbol-icon">💡</div>
            <div class="symbol-text">灵感激发</div>
          </div>
          
          <div class="symbol symbol-5">
            <div class="symbol-icon">🔗</div>
            <div class="symbol-text">跨次元同步</div>
          </div>
        </div>
        
        <p>中央的紫色盒子象征"宝贝盒子"本身，打开的盒盖代表无限创意迸发。五个飞出的彩色元素分别代表APP的五大核心功能模块，每个元素都有独特的造型和细节，象征不同的玩法特色。</p>
        <p>整体设计采用流畅的线条和渐变色，体现现代科技感与创意活力。动态的漂浮效果象征APP的互动性和趣味性。</p>
      </div>
    </div>
    
    <div class="footer">
      <button class="btn-generate" id="generateBtn">
        <i class="fas fa-magic"></i> 生成我的Logo
      </button>
      
      <div class="download-options">
        <button class="btn-download" id="downloadSvgBtn">
          <i class="fas fa-download"></i> 下载SVG格式
        </button>
        <button class="btn-download" id="downloadPngBtn">
          <i class="fas fa-download"></i> 下载PNG格式
        </button>
      </div>
      
      <div class="download-info">
        <i class="fas fa-info-circle"></i> 选择您需要的格式：SVG适合印刷和高质量显示，PNG适合网页和普通应用
      </div>
      
      <div class="status-message" id="statusMessage"></div>
    </div>
  </div>

  <script>
    // 为Logo元素添加动画效果
    document.querySelectorAll('.creative-element').forEach((element, index) => {
      element.style.animationDuration = `${4 + index * 0.5}s`;
    });
    
    // 生成Logo按钮事件
    document.getElementById('generateBtn').addEventListener('click', function() {
      const statusMessage = document.getElementById('statusMessage');
      statusMessage.style.display = 'block';
      statusMessage.className = 'status-message status-success';
      statusMessage.innerHTML = '✅ Logo已生成成功！您现在可以下载SVG或PNG格式';
      
      // 添加生成动画效果
      this.innerHTML = '<i class="fas fa-check"></i> Logo已生成';
      this.classList.add('btn-generate-disabled');
      
      // 3秒后恢复按钮
      setTimeout(() => {
        this.innerHTML = '<i class="fas fa-magic"></i> 重新生成Logo';
        this.classList.remove('btn-generate-disabled');
      }, 3000);
    });
    
    // SVG下载功能
    document.getElementById('downloadSvgBtn').addEventListener('click', function() {
      const statusMessage = document.getElementById('statusMessage');
      
      try {
        // 获取SVG部分的HTML内容
        const svgContent = document.querySelector('.logo-core').innerHTML;
        
        // 添加SVG命名空间
        const fullSvg = `
          <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
            ${svgContent}
          </svg>
        `;
        
        // 创建Blob对象
        const blob = new Blob([fullSvg], {type: 'image/svg+xml'});
        const url = URL.createObjectURL(blob);
        
        // 创建下载链接
        const a = document.createElement('a');
        a.href = url;
        a.download = 'babybox-logo.svg';
        document.body.appendChild(a);
        a.click();
        
        // 清理
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
        
        // 显示成功消息
        statusMessage.style.display = 'block';
        statusMessage.className = 'status-message status-success';
        statusMessage.innerHTML = '✅ SVG文件已开始下载！文件名: babybox-logo.svg';
      } catch (error) {
        // 显示错误消息
        statusMessage.style.display = 'block';
        statusMessage.className = 'status-message status-error';
        statusMessage.innerHTML = '❌ 下载失败: ' + error.message;
      }
    });
    
    // PNG下载功能
    document.getElementById('downloadPngBtn').addEventListener('click', function() {
      const statusMessage = document.getElementById('statusMessage');
      const logoContainer = document.getElementById('logoContainer');
      
      statusMessage.style.display = 'block';
      statusMessage.className = 'status-message status-success';
      statusMessage.innerHTML = '⏳ 正在生成PNG文件，请稍候...';
      
      // 使用html2canvas将div转换为canvas
      html2canvas(logoContainer, {
        scale: 2, // 提高分辨率
        backgroundColor: null
      }).then(canvas => {
        // 将canvas转换为PNG图片
        const pngUrl = canvas.toDataURL('image/png');
        
        // 创建下载链接
        const a = document.createElement('a');
        a.href = pngUrl;
        a.download = 'babybox-logo.png';
        document.body.appendChild(a);
        a.click();
        
        // 清理
        document.body.removeChild(a);
        
        // 更新状态消息
        statusMessage.style.display = 'block';
        statusMessage.className = 'status-message status-success';
        statusMessage.innerHTML = '✅ PNG文件已开始下载！文件名: babybox-logo.png';
      }).catch(error => {
        // 显示错误消息
        statusMessage.style.display = 'block';
        statusMessage.className = 'status-message status-error';
        statusMessage.innerHTML = '❌ PNG生成失败: ' + error.message;
      });
    });
  </script>
</body>
</html>